<script setup lang="ts">
import home from '../api/home'
import { reactive, ref } from 'vue'
import {ElMessage, FormInstance, FormRules} from 'element-plus'
import Header from "../components/Header.vue";


const ruleFormRef = ref<FormInstance>()
const validatePass = (rule: any, value: any, callback: any) => {
  const reg = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
  if (value === '') {
    callback(new Error('请输入邮箱'))
  } else if (!reg.test(value)) {
    callback(new Error('邮箱格式不正确'))
  } else {
    if (home.content !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('content')
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入反馈内容'))
  } else {
    callback()
  }
}



const rules = reactive<FormRules<typeof home>>({
  email: [{ validator: validatePass, trigger: 'blur' }],
  // email
  content: [{ validator: validatePass2, trigger: 'blur' }],})


// 表单提交
const commitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      home.send_email().then(() => {
        ElMessage.success('提交成功，请耐心等待管理员审核')
        // formEl.resetFields() // 重置表单
      }).catch((err) => {
        ElMessage.error('提交失败，请正确填写邮箱或再试')
      })
    } else {
      ElMessage.error('请认真填写内容')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<template>
  <Header></Header>
  <div class="home">
    <div class="wrapper">
      <h1>Welcome to your world!</h1>
      <p class="desc">这是交流学习论坛，大家可以分享自己的想法、经验、心得、教学等等。尽情表白自己心爱的人吧！</p>
      <div class="div_notice">
        <h2>注意事项</h2>
        <p class="notice">注意：本论坛仅供交流学习，请勿发表任何违法或不道德的内容！举报违法或不道德内容请联系管理员，严重者将被<span>永久封禁</span>。
        </p>
      </div>
      <div class="send_mail">
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="home"
            status-icon
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
        >
          <el-form-item label="邮箱" prop="email">
            <el-input
                v-model="home.email"
                placeholder="请您的输入邮箱"
                autocomplete="off"
            />
          </el-form-item>

          <el-form-item label="内容" prop="content">
            <el-input v-model="home.content" placeholder="请输入反馈内容" type="textarea"  autocomplete="off"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="commitForm(ruleFormRef)">
              提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<style scoped >

h1 {
  font-size: 36px;
  font-weight: bold;
  margin-top: 60px;
}

h2 {
  font-size: 24px;
  color: #fff;
}

.notice {
  font-size: 16px;
  color: black;

  span {
    color: red;
    font-weight: bold;
    font-size: 18px;
    font-style: italic;
  }
}

.desc {
  font-size: 25px;
  margin-top: 20px;
}

.div_notice {
  width: 350px;
  height: 160px;
  background-color: #7AC5CD;
  border-radius: 5px;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
  display: inline-block;

}

.send_mail {
  margin-top: 25px;
  display: inline-block;
  float: right;
  height: 400px;
}
</style>